@import '../common/style/base.less';

@tab-bar-cls: ~'@{prefix}-tab-bar';

@tab-bar-bg-color: var(--td-tab-bar-bg-color, @bg-color-container);
@tab-bar-border-color: var(--td-tab-bar-border-color, @border-level-1-color);
@tab-bar-round-shadow: var(--td-tab-bar-round-shadow, @shadow-3);

.@{tab-bar-cls} {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;
  background-color: @tab-bar-bg-color;
  box-sizing: border-box;
  pointer-events: auto;

  &--normal&--border::before {
    z-index: 1;
    .hairline-top(@color: @tab-bar-border-color);
  }

  &--fixed {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
  }

  &--normal&--safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  &--round {
    margin-left: 32rpx;
    margin-right: 32rpx;
    border-radius: 999px;
    box-shadow: @tab-bar-round-shadow;
  }

  &--fixed&--round&--safe {
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
  }
}
